<header id="header" class="animated fadeInDown">

  <div id="logo-group">
    <span id="logo"> <img src="assets/img/logo.png" alt="SmartAdmin"> </span>
  </div>

  <span id="extr-page-header-space"> <span class="hidden-mobile hiddex-xs">Need an account?</span> <a routerLink="/auth/register" class="btn btn-danger">Create account</a> </span>

</header>
<div id="main" role="main" class="animated fadeInDown">

  <div id="content" class="container">

    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-7 col-lg-8 hidden-xs hidden-sm">
        <h1 class="txt-color-red login-header-big">SmartAdmin</h1>
        <div class="hero">

          <div class="pull-left login-desc-box-l">
            <h4 class="paragraph-header">It's Okay to be Smart. Experience the simplicity of SmartAdmin, everywhere you go!</h4>
            <div class="login-app-icons">
              <a routerLink="/dashboard/analytics" class="btn btn-danger btn-sm">Frontend Template</a>
              <a routerLink="/smartadmin/app-layouts" class="btn btn-danger btn-sm">Find out more</a>
            </div>
          </div>

          <img src="assets/img/demo/iphoneview.png" class="pull-right display-image" alt="" style="width:210px">

        </div>

        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
            <h5 class="about-heading">About SmartAdmin - Are you up to date?</h5>
            <p>
              Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.
            </p>
          </div>
          <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
            <h5 class="about-heading">Not just your average template!</h5>
            <p>
              Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi voluptatem accusantium!
            </p>
          </div>
        </div>

      </div>
      <div class="col-xs-12 col-sm-12 col-md-5 col-lg-4">
        <div class="well no-padding">
          <form id="login-form" class="smart-form client-form">
            <header>
              Forgot Password
            </header>

            <fieldset>

              <section>
                <label class="label">Enter your email address</label>
                <label class="input"> <i class="icon-append fa fa-envelope"></i>
                  <input type="email" name="email">
                  <b class="tooltip tooltip-top-right"><i class="fa fa-envelope txt-color-teal"></i> Please enter email address for password reset</b></label>
              </section>
              <section>
										<span class="timeline-seperator text-center text-primary"> <span class="font-sm">OR</span>
              </span></section>
              <section>
                <label class="label">Your Username</label>
                <label class="input"> <i class="icon-append fa fa-user"></i>
                  <input type="text" name="username">
                  <b class="tooltip tooltip-top-right"><i class="fa fa-user txt-color-teal"></i> Enter your username</b> </label>
                <div class="note">
                  <a routerLink="/auth/login">I remembered my password!</a>
                </div>
              </section>

            </fieldset>
            <footer>
              <button (click)="submit($event)" class="btn btn-primary">
                <i class="fa fa-refresh"></i> Reset Password
              </button>
            </footer>
          </form>

        </div>

        <h5 class="text-center"> - Or sign in using -</h5>

        <ul class="list-inline text-center">
          <li>
            <a (click)="(null)" class="btn btn-primary btn-circle"><i class="fa fa-facebook"></i></a>
          </li>
          <li>
            <a (click)="(null)" class="btn btn-info btn-circle"><i class="fa fa-twitter"></i></a>
          </li>
          <li>
            <a (click)="(null)" class="btn btn-warning btn-circle"><i class="fa fa-linkedin"></i></a>
          </li>
        </ul>

      </div>
    </div>
  </div>

</div>

